<template>
    <div class='dialog'>
        this is dialog 
        <button @click="isShow=true">弹窗</button>
        <!-- teleport会在渲染的时候直接渲染到to所对应的css选择器里面去 -->
        <teleport to='body' >
            <div v-if="isShow">
                <button @click="isShow=false">关闭</button>
            </div>
        </teleport>
    </div>
</template>

<script>
    import {ref,reactive,provide,toRefs} from 'vue'
    export default {
        name : "Dialog",
        setup(){
            let isShow = ref(false)
            return {isShow}
        }
    }
</script>

<style scoped>
    .dialog{
        background-color: #66ff66;
        padding:10px;
        margin:10px;
        text-align:center;
        /* 使得div居中的最好的办法 */
        position:absolute;
        left:50%;
        top:50%;
        /* translate(left,top)是偏移自身大小的多少倍 */
        transform: translate(-200%,-500%);
    }
</style>